<template>
    <el-select v-model="sltVal" size="small" class="w-90" @change="handleChange">
        <el-option v-for="(item, index) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
</template>
<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
const props = defineProps({
    dateValue: {
        type: Number
    },
    valueList: {
        type: Array
    }
})

const emits = defineEmits(['update:dateValue', 'update:valueList'])
const sltVal = ref('')
// 今天、昨天、上周、本月、上月、全部
const options = ref([
    {
        label: '今天',
        value: 1
    },
    {
        label: '昨天',
        value: 2
    },
    {
        label: '上周',
        value: 3
    },
    {
        label: '本月',
        value: 4
    },
    {
        label: '上月',
        value: 5
    },
    {
        label: '全部',
        value: 6
    }
])

const createListValue = () => {
    let day = ''
    let startday, endday
    switch (sltVal.value) {
        case 1:
            day = dayjs().format('YYYY-MM-DD')
            emits('update:valueList', [day, day])
            break
        case 2:
            day = dayjs().set('date', dayjs().date() - 1).format('YYYY-MM-DD')
            emits('update:valueList', [day, day])
            break
        case 3:
            endday = dayjs().startOf('week').format('YYYY-MM-DD')
            startday = dayjs(endday).subtract(6, 'day').format('YYYY-MM-DD')
            emits('update:valueList', [startday, endday])
            break
        case 4:
            startday = dayjs().startOf('month').format('YYYY-MM-DD')
            endday = dayjs().endOf('month').format('YYYY-MM-DD')
            emits('update:valueList', [startday, endday])
            break
        case 5:
            startday = dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD')
            endday = dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD')
            emits('update:valueList', [startday, endday])
            break
        case 6:
            emits('update:valueList', ['', ''])
            break
    }
}

const handleChange = (ev) => {
    emits('update:dateValue', sltVal.value)
    createListValue()
}

watch(() => props.dateValue, (newval) => {
    if (newval) {
        sltVal.value = newval
        createListValue()
    }
}, {
    immediate: true
})
</script>
<style lang="scss" scoped></style>